<template>
	<div>
		<mj-title type="h2" title="Notification 通知提醒"></mj-title>
		<div class="page-desc">悬浮出现在页面角落，显示全局的通知提醒消息。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
		        <mj-button @click="open1()" type="primary">default</mj-button>
		        <mj-button @click="open2('success')">success</mj-button>
		        <mj-button @click="open3('warning')">warning</mj-button>
		        <mj-button @click="open4('info')">info</mj-button>
		        <mj-button @click="open5('error')">error</mj-button>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
&lt;div>
    &lt;mj-button @click="open1()">default&lt;/mj-button>
    &lt;mj-button @click="open2('success')">success&lt;/mj-button>
    &lt;mj-button @click="open3('warning')">warning&lt;/mj-button>
    &lt;mj-button @click="open4('info')">info&lt;/mj-button>
    &lt;mj-button @click="open5('error')">error&lt;/mj-button>
&lt;/div>
&lt;/template>
&lt;script>
export default {
	methods: {
        open1(){
            this.$notify({
                content: '这是条普通的提示消息',
            })
        },
        open2(){
            this.$notify({
            	title:'Notification title',
            	type: 'success',
                content: '这是一条成功提示消息',
            })
        },
        open3(){
            this.$notify({
            	title:'Notification title',
            	type: 'warning',
                content: '这是一条警告提示消息',
            })
        },
        open4(){
            this.$notify({
            	title:'Notification title',
            	type: 'info',
                content: '这是一条提示消息',
            })
        },
        open5(){
            this.$notify({
            	title:'Notification title',
            	type: 'error',
                content: '这是一条错误提示消息',
            })
        },
	}
}
&lt;/script>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="自定义延时关闭时间"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
        		<mj-button @click="open6()">延时关闭</mj-button>
        		<ul class="page-list">
        			<li>通过参数<code>duration</code>设置自定义时长，为 0 则不自动关闭。</li>
        		</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-button @click="open6()">延时关闭&lt;/mj-button>
&lt;/template>
&lt;script>
	export default {
		methods: {
			open6(){
				this.$notify({
					title:'Notification title',
					content: '5秒后自动关闭',
					duration:5000,
				})
			},
		}
	}
&lt;/script>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="自定义弹出位置"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
        		<mj-button @click="open7('top')">top弹出</mj-button>
        		<mj-button @click="open7('bottom')">bottom弹出</mj-button>
        		<ul class="page-list">
        			<li>通过参数<code>position</code>设置弹出位置，提供<code>top</code>、<code>bottom</code>选项，默认top。</li>
        		</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
&lt;div>
	&lt;mj-button @click="open7('top')">top弹出&lt;/mj-button>
	&lt;mj-button @click="open7('bottom')">bottom弹出&lt;/mj-button>
&lt;/div>
&lt;/template>
&lt;script>
export default {
	methods: {
		open7(position){
			this.$notify({
				title:'Notification title',
				content: position+'-位置弹出',
				position:position,
			})
		},
	}
}
&lt;/script>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Notification 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>通知提醒的标题</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>type</td>
					<td>主题样式，可选值<code>success</code>、<code>error</code>、<code>warning</code>、<code>info</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>duration</td>
					<td>自动关闭的延时，单位秒，不关闭可以写 0</td>
					<td>Number</td>
					<td>3000</td>
				</tr>
				<tr>
					<td>content</td>
					<td>通知提醒的内容</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>position</td>
					<td>自定义弹出位置，可选值<code>top</code>、<code>bottom</code></td>
					<td>String</td>
					<td>top</td>
				</tr>
			</tbody>
		</table>





	</div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        methods: {
            open1(){
                this.$notify({
                    content: '这是条普通的提示消息',
                })
            },
            open2(){
                this.$notify({
                	title:'Notification title',
                	type: 'success',
                    content: '这是一条成功提示消息',
                })
            },
            open3(){
                this.$notify({
                	title:'Notification title',
                	type: 'warning',
                    content: '这是一条警告提示消息',
                })
            },
            open4(){
                this.$notify({
                	title:'Notification title',
                	type: 'info',
                    content: '这是一条提示消息',
                })
            },
            open5(){
                this.$notify({
                	title:'Notification title',
                	type: 'error',
                    content: '这是一条错误提示消息',
                })
            },
            open6(){
                this.$notify({
                	title:'Notification title',
                    content: '5秒后自动关闭',
                    duration:5000,
                })
            },
            open7(position){
                this.$notify({
                	title:'Notification title',
                    content: position+'-位置弹出',
                    position:position,
                })
            },
        },
    }
</script>

<style scoped>
.page-list {margin-top: 10px;}
</style>